<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        font-size: 20px;
      }
    </style>
  </head>

  <body>
    <p id="output"></p>
    <p id="output2"></p>
    <p id="output3"></p>
    <h3>接下来是递归</h3>
    <input type="text" id="inputNumber" />
    <button onclick="myFunc()">点我获得数字阶乘</button>
    <p id="output4"></p>
    <p>使用箭头功能，您无需键入function关键字，return关键字和大括号。</p>

    <p id="output5"></p>
    <p id="output6"></p>
    <script>
      //函数定义
      function greet() {
        document.write("Hello, World!<br>");
      }

      //函数表达式--------------
      //函数表达式可以存储在变量中
      var sum = function (a, b) {
        return a + b;
      };
      // 该变量可用作函数
      var x = sum(100, 8);
      document.write(x + "<br>");

      //函数提升-----------------
      greet();

      function greet() {
        document.getElementById("output").innerHTML = "Hello World";
      }

      //自执行匿名函数------------
      // (function () {
      //   // 要执行的语句
      // })();
      (function () {
        document.getElementById("output2").innerHTML = "Hello, World!";
      })();

      let result = (function () {
        let name = "Vishal";
        return name;
      })();
      document.write(result);

      (function (x, y) {
        document.getElementById("output3").innerHTML = x + y;
      })(5, 10);

      //回调函数------------------
      function greet2(name) {
        alert("好的" + name);
      }

      function processInput(callback) {
        let name = prompt("请输入你的名字: ");
        callback(name);
      }
      // 将greet函数作为参数传递给processInput函数
      processInput(greet2);

      //递归-----------------------
      function myFunc() {
        var numbers = document.getElementById("inputNumber").value;
        var factorial = function (number) {
          if (number <= 0) {
            // terminal case
            return 1;
          } else {
            // 块执行
            return number * factorial(number - 1);
          }
        };
        document.getElementById("output4").innerHTML = factorial(numbers);
      }

      //箭头函数
      const sum1 = (x, y) => x + y;
      document.getElementById("output5").innerHTML = sum1(10, 20);

      const sum2 = (x, y) => {
        return x + y;
      };
      document.getElementById("output6").innerHTML = sum2(10, 20);
    </script>
  </body>
</html>
